<template>
  <div class="body_bgi full p_10 bgc_f4f4f4">
    <div class="w_full h_full-50 scroll_box overflow_y_auto">
      <div 
        class="w_full h_80 mb_10 border_1_s_eee flex_row_start bgc_fff border_radius_10" 
        v-for="(item, index) in personList" :key="index"
        @click="goToPage(`/person-score/${roomId}/${contestId}/${item.id}/${item.personNumber}/${item.name}/${item.isScore}`)"
      >
        <div class="w_80 h_80 p_5">
          <img 
            v-if="item.avatar"
            class="full border_radius_20"
            :src="item.avatar" 
            alt=""
          >
          <img 
            v-else
            class="full border_radius_20"
            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.CzNVsT52uAP8l2DWobbkMgHaHa?w=177&h=180&c=7&r=0&o=5&pid=1.7" 
            alt=""
          >
        </div>

        <div class="w_full-80 h_full p_5 bprder_1_s_f00 relative fs_1rem">
          <div class="w_full h_70 lh_70">{{ item.personNumber }} {{item.name}}</div> 

          <span class="h_60 lh_60 absolute top_10 right_10 main_color " v-if="item.isScore == 1">
            已评{{ item.personScore.totalScore }}分 
          </span>

          <span class="h_60 lh_60 absolute top_10 right_10 color_ff2c64" v-else>
            未评分
          </span>
        </div>
      </div>
    </div>
    
    <Tabbar />
  </div>
</template>

<script>
  import { getPersonList } from '@/api/index.js'
  import Tabbar from '@/components/tabbar.vue'

  export default {
    name: 'PersonList',
    components: { Tabbar },
    data() {
      return {
        contestId: null,
        roomId: null,

        personList: []
      }
    },
    
    async mounted() {
      let contestId = this.$route.params.contestId
      let roomId = this.$route.params.roomId

      this.contestId = contestId
      this.roomId = roomId

      // 获取 选手列表
      this.getPersonList(contestId)
    },
    methods: {
      // 获取 选手列表
      async getPersonList(contestId) {
        let res = await getPersonList(contestId)
        try {
          if (res.code == 1000 && res.message == 'success') {
            this.personList = res.data
          }
        } catch(err) {
          console.log('获取选手列表失败 : ', err);
        }
      },

      goToPage(path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style>

</style>